<template>
	<!--供应商and客户销售and采购汇总-->
	<view class="wrapper" :style="{height:wrapperHeight +'px'}">
		<!--<view class="title-padding"></view>-->
		<view class="headerGd">
			<view class="header">
				<button class="back" @tap="back()"></button>
				{{OrderTitle}}
				<button class="filter" @tap="filter()"></button>
			</view>
		</view>
		<view class="container" :style="{height: containerHeight + 'px'}">
			<view class="curstom">
				<view class="changeList" @tap="changeListAl">

				</view>
				<view class="curstomName">
					{{GoodsName}}
				</view>
				<view class="filterTime">
					<text>{{GoodsCode}}</text>
					<text>{{BarCode}}</text>
				</view>
			</view>
		<!-- 	@tap="changeWidth()" -->
			<view class="orderList" :style="{height: orderListHeight + 'px' }" v-show="!isList">
				<view class="orderNav" :style="{width:tdAllWidth+'px'}" >
					<text :style="{width:tdWidth[index]+'px'}" v-for="(item,index) in tdHeaderList" :key="index" @tap="test(index)">
						{{item.name}}
						<label class="text-blue text-xl" :class="paixu01?'cuIcon-triangledownfill':'cuIcon-triangleupfill'" v-if="index==12"></label>
					</text>
				</view>
				<view class="orderLi" :style="{height:orderLiHeight +'px',width:tdAllWidth+'px'}">
					<view class="orderItem" v-for="(item,index) in orderList" :key="index" @longtap="Del(item.GoodsID)">
						<text :style="{width:tdWidth[0]+'px'}">
							<!-- 序号 -->
							{{index+1}}
						</text>
						<text :style="{width:tdWidth[1]+'px'}" >
							<!-- 商品编号 -->
							{{item.GoodsCode}}
						</text>
						
						<text :style="{width:tdWidth[2]+'px'}">
							<!-- 商品名称 -->
							{{item.GoodsName}}
						</text>
						<text :style="{width:tdWidth[3]+'px'}">
							<!-- 类型 -->
							<!-- {{item.GoodsTypeID}} -->
						</text>
						<text :style="{width:tdWidth[4]+'px'}">
							<!-- 规格 -->
							{{item.Spec}}
						</text>
						<text :style="{width:tdWidth[5]+'px'}">
							<!-- 主条码 -->
							{{item.BarCode}}
						</text>
						<text :style="{width:tdWidth[6]+'px'}"> 
						<!-- 单位 -->
							{{item.UnitID}}
						</text>
						<text :style="{width:tdWidth[7]+'px'}">
							<!-- 进价 -->
							{{item.InPrice}}
						</text>
						<text :style="{width:tdWidth[8]+'px'}">
							<!-- 零售价 -->
							{{item.SalePrice}}
						</text>
						<text :style="{width:tdWidth[9]+'px'}">
							<!-- 单价1 -->
							{{item.Price1}}
						</text>
						<text :style="{width:tdWidth[10]+'px'}">
							<!-- 单价2 -->
							{{item.Price2}}
						</text>
						<text :style="{width:tdWidth[11]+'px'}">
							<!-- 配送价-->
							{{item.Price3}}
						</text>
						<text :style="{width:tdWidth[12]+'px'}">
						
							<!-- 会员价-->
							{{item.VipPrice}}
								
						</text>
						<text :style="{width:tdWidth[13]+'px'}">
							<!-- 批发价-->
							{{item.PFPrice}}
						</text>
						<text :style="{width:tdWidth[14]+'px'}">
							<!-- 停止进货-->
							{{item.IsStopIn?'是':'否'}}
						</text>
	
						<text :style="{width:tdWidth[15]+'px'}">
							<!-- 停止销售-->
							{{item.IsStopSale?'是':'否'}}
						</text>
						<text :style="{width:tdWidth[16]+'px'}">
							<!-- 停用-->
							{{item.IsStop?'是':'否'}}
						</text>
						<text :style="{width:tdWidth[17]+'px'}">
							<!-- 批号管理-->
							{{item.IsBatch?'是':'否'}}
						</text>
						<text :style="{width:tdWidth[18]+'px'}">
							<!-- 主供应商-->
							{{item.ClientID}}
						</text>
						
					</view>
				</view>
			
			</view>
			<view class="orderLookAllList" :style="{height: orderListHeight + 'px'}" v-show="isList">
				<!-- block -->
				<view class="orderLookItem" v-for="(item,index) in orderList" :style="{ display:(nowRote === index) ? 'table':'block'}" :key="index" @longtap="Del(item.GoodsID)" >
					<view @tap="lookDetail(0,item)">
					<text>{{index+1}}</text>
					<text>商品编号:{{item.GoodsCode}}</text>
					<text>商品名称:{{item.GoodsName}}</text>
					<!-- <text>类型:{{item.GoodsTypeID}}</text> -->
				
					<text>规格:{{item.Spec}}</text>
					<text>主条码:{{item.BarCode}}</text>
					<text>单位:{{item.UnitID}}</text>
					<text>进价:{{item.InPrice}}</text>
					<text>零售价:{{item.SalePrice}}</text>
					<text>单价1:{{item.Price1}}</text>
					<text>单价2:{{item.Price2}}</text>
					<text>配送价:{{item.Price3}}</text>
					<text>会员价:{{item.VipPrice}}</text>
					<text>批发价:{{item.PFPrice}}</text>
					<text>停止进货:{{item.IsStopIn?'是':'否'}}</text>
					<text>停止销售:{{item.IsStopSale?'是':'否'}}</text>
					<text>停用:{{item.IsStop?'是':'否'}}</text>
					<text>批号管理:{{item.IsBatch?'是':'否'}}</text>
					<text>主供应商:{{item.ClientName}}</text>
					</view>
					<!-- <text>{{!isSupperPurb?"销售数(未审)":"进货数(未审)"}}:{{item.real_qty2}}</text> -->
					<button class="lookMoreInfo" :style="{ transform :(nowRote == index)  ? 'rotate(180deg)':'rotate( 0deg)'}"
					 @tap="lookMore(index)"></button>
				</view>
			</view>
		</view>
		<view class="changetdWidth" v-show="showChange">
			<view class="changetdWidthHeader">修改列长度</view>
			<view  class="changetdWidthContain">
			<view v-for="(item,index) in tdHeaderList" :key="index">
				<view class="changeItem">
					<text class="liName">{{item.name}}列</text>  
					<input v-model="tdWidth[index]" />
				</view>
			</view>
			</view>
			<view class="sureBt">
				<button  @tap="hideChaneg()">确定</button>
			</view>
		</view>
		<view class="flOptions" @tap="Add()">
			新增
		</view>
	</view>
</template>
<script src="./info-GoodsMessage.js"></script>
<style lang="scss">
   @import url('../../style/changecolum.scss');
	/*图标的大小*/
	$iconWidth:20px;
	$iconHeight:20px;
	$iconBackSize:20px;
	.title-padding {
		height: var(--status-bar-height);
		background: $bb-bg-color;
		box-sizing: content-box;
	}

	page {
		width: 100%;
		height: 100%;
		padding-bottom: 0px;
	}

	.wrapper {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	button::after {
		border: none;
		padding: 0px;
	}

	.headerGd {
		width: 100%;
		height: 100upx;
		line-height: 50px;
		background: $bb-bg-color;
		display: table;

		.header {
			position: relative;
			text-align: center;
			font-size: 16px;
			color: #FFF;

			.back {
				width: $iconWidth;
				height: $iconHeight;
				background: url(../../static/back.png) no-repeat;
				position: absolute;
				left: 20upx;
				top: 30upx;
				background-size: $iconBackSize;
			}

			.filter {
				width: $iconWidth;
				height: $iconHeight;
				position: absolute;
				right: 10px;
				top: 15px;
				background: url(../../static/cg/filter.png);
			}
		}
	}

	.container {
		font-size: 14px;
		.curstom {
			width: 100%;
			height: 50px;
			line-height: 50px;
			display: flex;
			padding-left: 10px;
			padding-right: 10px;
			box-sizing: border-box;
			background: #030ed9;
			box-sizing: border-box;
			color: #FFF;

			.curstomName {
				flex: 1;
				text-align: center;
			}

			.filterTime {
				flex: 1;
				text-align: center;
				display: flex;
				flex-direction: column;

				text {
					flex: 1;
					line-height: 50upx;
					height: 50upx;
					
				}
			}
			.changeList {
				width: 30px;
				height: 30px;
				background: url(../../static/changeIcon.png) no-repeat;
				background-size: 100%;
				margin-top: 30upx;
			}
		}

		//表格单据
		.orderList {
			width: 100%;
			overflow: auto;
			box-sizing: border-box;

			text {
				float: left;
				text-align: center;
				box-sizing: border-box;
				display: inline-block;
				height: 40px;
				line-height: 40px;
				border-right: 1px solid #ebebeb;
				white-space:nowrap;
				text-overflow:ellipsis;
				overflow:hidden;
// 				&:nth-child(1) {
// 					width: 80px;
// 				}
// 
// 				&:nth-child(2) {
// 					width: 125px;
// 				}
// 
// 				&:nth-child(3) {
// 					width: 200px;
// 				}
// 
// 				&:nth-child(n+4) {
// 					width: 125px;
// 				}

				&:last-child {
					border: none;
				}
			}

			.orderNav {
				width: 100%;
				height: 40px;
				line-height: 40px;
				border: 1px solid #ebebeb;
				box-sizing: border-box;
				overflow: hidden;
			}

			.orderLi {
				background: #ebebeb;
				.orderItem {
					height: 40px;
					line-height: 40px;
					width: 100%;
					border: 1px solid #ebebeb;
					box-sizing: border-box;
					border-bottom: 1px solid #CCCCCC;
					border-left: 1px solid #CCC;
					border-right: 1px solid #CCC;

					text {
						border-right: 1px solid #CCC;

						&:last-child {
							border: none;
						}
					}
				}
			}

			.allPrice {
				@extend .orderNav;
				background: #030ed9;
				color: #FFF;
			}
		}

		//列表单据
		.orderLookAllList {
			width: 100%;
			background: #ebebeb;
			box-sizing: border-box;
			padding: 30upx;
			box-sizing: border-box;
			overflow: auto;
            padding-bottom:100upx;
			.orderLookItem {
				width: 100%;
				height: 220upx;
				overflow: hidden;
				position: relative;
				border-radius: 20upx;
				background: #FFF;
				box-sizing: border-box;
				padding-left: 30upx;
				padding-right: 100upx;
				padding-top: 5upx;
				padding-bottom: 5upx;
				margin-bottom: 20upx;
			}
			.lookMoreInfo {
				width: $iconWidth;
				height: $iconHeight;
				background: url(../../static/pull.png) no-repeat;
				position: absolute;
				bottom: 10upx;
				right: 10upx;
				padding: 0upx;
				background-size: 100% 100%;
				transition: height 2s;
			}
			text {
				display: block;
				font-size: 30upx;
				&:nth-child(1) {
					position: absolute;
					top: 10upx;
					right: 10upx;
					width: $iconWidth;
					height: $iconHeight;
					border-radius: 10upx;
					text-align: center;
					display: table;
					color: #000;
					line-height: $iconHeight;
					padding: 5upx;
				}
				&:nth-child(n+2) {
					height: 55upx;
					line-height: 55upx;
					display: table;
				}
			}
			.lookMoreClass {
				display: table;

			}
			.openAndClose {
				transform: rotate(180deg);
			}
		}

	}
	.flOptions{
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		height: 50px;
		line-height: 50px;
		text-align: center;
		background: #FFF;
		background: #FFF;
		color:#000;
		font-size: 16px;
	}

</style>
